<template>
  <div>
    <el-form :inline="true" :model="query">
     <template>

  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="申请职位" name="/arapplyRoleea"></el-tab-pane>
    <el-tab-pane label="审核职位" name="/process"></el-tab-pane>
  </el-tabs>
  </template>
    </el-form>
    <!-- 数据展示 -->
    <el-descriptions title="用户信息">
      <el-descriptions-item label="用户名">{{user.userName}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{user.userTel}}</el-descriptions-item>
      <el-descriptions-item label="所在区域">
        <span v-for="vo in integers" :key="vo">{{vo.areaName}}，</span>
      
      </el-descriptions-item>
      <el-descriptions-item label="当前职位">
        <span v-for="vo in integers" :key="vo">{{vo.roleName}}，</span>

      </el-descriptions-item>
    </el-descriptions>



<el-button @click="applyshow()">申请</el-button>
   



          <!-- 申请模态框 -->
    <el-dialog title="申请职位" :visible.sync="dailog.applyshow" width="30%">
      <el-form   label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="职位名称" prop="areaName">

              <el-checkbox-group v-model="check.checkRole">
                <el-checkbox
                  :label="item.roleId"
                  v-for="item in roleList"
                  :key="item.roleId"
                  
                >{{item.roleName}}
              </el-checkbox>
              </el-checkbox-group>

            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dailog.applyshow = false">取 消</el-button>
        <el-button type="primary" @click="apply()">确 定</el-button>
      </span>
    </el-dialog>

    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dailog:{
          applyshow:false
       },                                                                                        
        check:{
          areaId:"",
        
          userId:"",
          
          checkRole:{}

        },
        user:{
          userId:"",
          areaId:""

        },
        radio: '',
        AreaListCheck:{},
        roleList:{},
        areaList:{},
        integers:{}
      }
    },
    methods:{
      applyshow(){
        this.$axios.post("/area/selectOneRoleAndArea",this.user)
          .then((res)=>{
            this.check.checkRole=res.data.data.integers;              
            this.dailog.applyshow=true;
          });

        
      },
      look(){
        this.user = JSON.parse(sessionStorage.getItem("user"));
        this.check.userId=this.user.userId
        this.check.areaId=this.user.areaId
        this.$axios.post("/area/selectAllRoleAndArea",this.user)
          .then((res)=>{
              this.areaList = res.data.data.allArea;
              this.roleList=res.data.data.allRole;              
              this.integers=res.data.data.integers;              
             
             

          });
         
      
          
      },
      handleClick(tab, event) {
       
        if(tab.name=="/process"){
          let count=0;
          for(var i=0;i<this.integers.length;i++){
            if(this.integers[i].roleId==3){
              count++;
            }
          }
          if(count==0){
            this.$message.success("对不起你没有权限");
            return
          }

        }
        this.$router.push(tab.name);
      },
      apply(){   

       

        

        this.$axios.post("/area/addApply",this.check)
        .then((res)=>{
          if(res.data.code==200){
            this.dailog.applyshow=false;
            this.$message.success("提交成功等待审核");
           

          }else{
            this.$message.error("提交失败或已申请过");
            this.dailog.applyshow=false;

          }


        });

      },

      



    },
    mounted() {
       this.look();
      
      }

  }
</script>
<style >
#backup1 {
  width: 100%;
  height:  100%;
}
.el-form--inline{
  line-height: 1;
  text-align: left;
}
.el-table{
  margin-top: 0px;
  line-height:1 ;
}
.el-pagination{
  text-align: right;
}

.el-descriptions-item__label.is-bordered-label {
  width: 160px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>